// http://ionicframework.com/docs/theming/
@import "~@ionic/angular/css/core.css";
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import "assets/styles/reset";
@import "assets/styles/base";
@import "assets/styles/screen";
@import "./customGlobal.scss";

html,
body {
    scroll-behavior: smooth !important;
}
div {
    scroll-behavior: smooth !important;
}
section {
    scroll-behavior: smooth !important;
    ::-webkit-scrollbar {
        width: 0px !important;
        display: none;
        /* background-color:transparent; */
    }
}

::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    /* background-color:transparent; */
}
p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.gray-bg {
    --background: #f5f5f5;
}

.white-bg {
    --background: #fff;
}

.bg-image-tag,
.bg-image {
    --background: #fff url(./assets/icon/pay_s.png) left top repeat !important;
    background: #fff url(./assets/icon/pay_s.png) left top repeat !important;
    @if $appType == "LJ" {
        --background: #fff url(./assets/icon/fw-watermark.png) left top repeat !important;
        background: #fff url(./assets/icon/fw-watermark.png) left top repeat !important;
    }
    @if $appType == "JS" {
        --background: #fff url(./assets/icon/fw-watermark.png) left top repeat !important;
        background: #fff url(./assets/icon/fw-watermark.png) left top repeat !important;
    }
}
ion-input{
    --padding-top:0!important;
    --padding-bottom:0!important;
  }
ion-toolbar {
    padding: 0 5px;
}
ion-content {
    ::-webkit-scrollbar {
        width: 0px !important;
        display: none;
        /* background-color:transparent; */
    }
}
.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.error {
    // border-radius: 1.53rem;
    .toast-message {
        color: white;
        font-size: 1rem;
    }

    .toast-wrapper {
        text-align: center;
        margin: 0 auto;
        background: rgba(39, 40, 46, 0.8);
        max-width: calc(100% - 60px);
        width: fit-content;
        width: -webkit-fit-content;
        border-radius: 1.53rem;
    }

    .toast-content {
        margin: 0 0.88rem;
    }
}

::ng-deep .toast-wrapper {
    border-radius: 1.53rem;
}

.searchNoData {
    color: #858894;
    font-size: 1rem;
    padding-top: 2.5rem;
    text-align: center;

    div {
        display: inline-block;

        label {
            float: left;
        }

        span {
            color: #ff6314;
            max-width: 6rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            float: left;
        }
    }
}

.noDataButton {
    // background: #858894;
    font-size: 1rem;
    color: #858894;
    margin-top: 2.5rem;
    // padding: 0.5rem 0;
    // padding-left: 0.5rem;
    // border-radius: 0.4rem;
    text-align: center;
}

.am-action-sheet {
    @if $appType == "LJ" {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        padding-top: 0.5rem;
    }
}

// ng-actionsheet
.am-action-sheet-button-list .am-action-sheet-destructive-button {
    color: #ff9500;
    @if $appType == "LJ" {
        color: $LJLabelColor;
        font-weight: bold;
    }
}
.am-action-sheet-button-list-item {
    @if $appType == "LJ" {
        color: $LJLabelLightBlackColor;
        border-bottom: 0.03rem solid #ddd;
    }
}
.am-action-sheet-destructive-button:after {
    @if $appType == "LJ" {
        content: url(assets/icon/icon_check@3x.png);
        width: 0.88rem;
        height: 0.88rem;
        position: absolute;
        right: 2.25rem;
        top: 0.5rem;
        transform: scale(0.5, 0.5);
    }
}
.am-action-sheet-button-list {
    text-align: center;
    color: #000;
    max-height: 80vh;
    overflow: scroll;
    @if $appType == "LJ" {
        color: $LJLabelLightBlackColor;
    }
}
.am-action-sheet-button-list-item::before {
    @if $appType == "LJ" {
        height: 0px !important;
        background-color: $LJSepLineColor !important;
    }
}

//  ng-alert-css
.am-modal-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1rem;
    color: #27282e;
    text-align: center;
}

.am-modal-transparent .am-modal-content .am-modal-body {
    padding: 0 1.25rem 1.25rem;
}

.am-modal-input-container {
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

html:not([data-scale]) .am-modal-button-group-v .am-modal-button {
    border-top: none;
    height: 2.75rem;
    line-height: 2.75rem;
    background: linear-gradient(270deg, rgba(255, 99, 20, 1) 0%, rgba(255, 149, 0, 1) 100%);
    border-radius: 0.31rem;
    margin: 0 1.25rem 1.25rem 1.25rem;
    position: relative;
    width: auto;
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.am-modal-input {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1rem;
    background: #f5f5f7;
    color: #27282e;
    padding-left: 0.94rem;
    padding-right: 0.94rem;
}

.am-modal-input input {
    position: relative;
    border: 0;
    width: 98%;
    margin: 0;
    background: #f5f5f7;
}

html:not([data-scale]) .am-modal-button-group-v .am-modal-button::before {
    content: "";
    position: absolute;
    background-color: white;
    display: block;
    z-index: 1;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 0%;
    height: 0px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

//  ng-alert-css end
.select-icon-inner {
    border-top: transparent !important;
}
.am-wingblank.am-wingblank-lg {
    margin: 0;
}
// ng-actionsheet end
// ng-loading
.am-toast-text.am-toast-text-icon {
    color: black;
    background: white;
}
// alert 确定btn
html:not([data-scale]) .LJ {
    .alert-button-inner.sc-ion-alert-ios:nth-child(1) {
        color: #27282e;
        font-size: 1rem;
        @if $appType == "LJ" {
            color: $LJAlertConfirmColor;
            font-weight: bold;
        }
    }
}
// alert message
html:not([data-scale]) {
    .alert-wrapper {
        .alert-message.sc-ion-alert-ios {
            color: #27282e;
            @if $appType == "LJ" {
                color: $LJAlertTitleColor;
            }
        }
    }
}

html:not([data-scale]) .remarks {
    .modal-wrapper {
        background: transparent;
    }
}

html:not([data-scale]) .resetPassword {
    .modal-wrapper {
        width: 18.75rem;
        height: 14rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.31rem;
    }
}

html:not([data-scale]) .customDialog {
    .modal-wrapper {
        width: 18.75rem;
        height: 8rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.8125rem;
    }
}
html:not([data-scale]) .sevice-modal {
    .modal-wrapper {
        width: 100vw;
        max-height: 13.38rem;
        position: absolute;
        bottom: 0;
        background: transparent;
    }
}
html:not([data-scale]) .ranking-modal {
    .modal-wrapper {
        width: 18.75rem;
        height: 18rem;
        background-color: #fff;
        border-radius: 0.5rem;
    }
}

html:not([data-scale]) .business-modal {
    .modal-wrapper {
        width: 18.75rem;
        height: 14.31rem;
        background-color: #fff;
        border-radius: 0.5rem;
    }
}

html:not([data-scale]) .LJ-modal-multiple {
    .modal-wrapper {
        height: 50%;
        position: absolute;
        bottom: calc(0px + var(--ion-safe-area-bottom));
    }
}
html:not([data-scale]) .recommend-modal,
.auto-modal {
    .modal-wrapper {
        // 改为自动高度
        background-color: transparent;
    }
}
html:not([data-scale]) .bottom-modal {
    .modal-wrapper {
        width: 100%;
        height: 75VH;
        position: fixed;
        bottom: 0;
        background-color: transparent;
    }
}

html:not([data-scale]) .alert-modal {
    .modal-wrapper {
        margin-left: 14%;
        margin-right: 14%;
        // 改为自动高度
        background-color: transparent;
    }
}

html:not([data-scale]) .open-ppw-app {
    .modal-wrapper {
        background-color: transparent;
        width: 100%;
        height: calc(19.5%);
        position: fixed;
        bottom: 0;
    }
}

html:not([data-scale]) .house-type {
    .modal-wrapper {
        background-color: transparent;
        width: 100%;
        height: 20rem;
        position: fixed;
        bottom: 0;
    }
}

html:not([data-scale]) .myreal-estate {
    .modal-wrapper {
        background-color: transparent;
        width: 100%;
        height: calc(100% - 300px);
        /* argin-top: 6.25rem; */
        border-radius: 1.25rem 1.25rem 0px 0px;
        position: fixed;
        bottom: 0;
    }
}
html:not([data-scale]) .myreal-estate {
    .modal-wrapper {
        background-color: transparent;
        width: 100%;
        height: calc(100% - 300px);
        /* argin-top: 6.25rem; */
        border-radius: 1.25rem 1.25rem 0px 0px;
        position: fixed;
        bottom: 0;
    }
}
html:not([data-scale]) .openmodal-secondary-linkage {
    .modal-wrapper {
        background-color: transparent;
        width: 100%;
        // height: 280px !important;
        height: 20rem;
        position: fixed;
        bottom: 0;
    }
}

html:not([data-scale]) .openmodal-choose-condition {
    .modal-wrapper {
        background-color: transparent;
        width: 100%;
        // height: 280px !important;
        position: fixed;
        bottom: 0;
    }
}

html:not([data-scale]) .recommend-modal-auto-heigth {
    .modal-wrapper {
        // width:18.75rem;
        background-color: transparent;
    }
}
html:not([data-scale]) .show-phone-modal {
    .modal-wrapper {
        width: 18.75rem;
        height: 10.88rem;
        background: #ffffff;
        border-radius: 0.31rem;
    }
}

html:not([data-scale]) .custom-popover {
    .modal-wrapper {
        // width: 17.5rem;
        // height: 28.13rem;
        border-radius: 0.5rem;
        background: transparent;
    }
}

html:not([data-scale]) .sharePage {
    .modal-wrapper {
        position: absolute;
        bottom: 0;
        background: transparent;
        max-height: 19.31rem;
        width: 100vw;
    }
}

html:not([data-scale]) .sharePageMin {
    .modal-wrapper {
        position: absolute;
        bottom: 0;
        background: transparent;
        max-height: 9.31rem;
        width: 100vw;
    }
}
html:not([data-scale]) .modal-m-select {
    .modal-wrapper {
        max-height: 70%;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.31rem;
        margin-left: 2.38rem;
        margin-right: 2.38rem;
    }
}

html:not([data-scale]) .my-custom-loadingCtrl {
    .loading-wrapper {
        --backdrop-opacity: 1;
        --background: transparent;
        --spinner-color: transparent;
    }
}

// ::ng-deep ion-searchbar div input.searchbar-input-container.sc-ion-searchbar-ios{
//     font-size: 0.81rem;
//   }

.searchbar-search-icon.sc-ion-searchbar-ios {
    width: 1rem !important;
    left: 0.63rem !important;
}

// 部门管理弹框样式
.businessCityAlert {
    .alert-head {
        padding-top: 1.25rem;
        padding-bottom: 0px;
    }
    .alert-title {
        margin-top: 0px;
        font-size: 1.13rem;
        font-weight: bold;
        color: #27282e;
        line-height: 1.13rem;
    }
    .alert-message {
        margin-top: 1.25rem;
        font-size: 1rem;
        font-weight: 400;
        color: #5c5e66;
        line-height: 1.38rem;
    }
}
// action sheet 相册相机
.action-sheet-button-inner.sc-ion-action-sheet-ios {
    font-size: 1rem;
    @if $appType == "LJ" {
        color: $LJLabelColor;
    }
}

.picker-col-indicator, .am-picker-col-mask{
    z-index: 20;
}

.am-picker-popup-mask {
    background-color: rgba(0, 0, 0, 0.2) !important;
}
.noData {
    padding-top: 2.5rem;
    text-align: center;
    font-size: 1rem;
    color: #858894;
}
.displayno {
    display: none !important;
}

/* Works - pass "rightAndTop" in cssClass to increase specificity */
html:not([data-scale]) .rightAndTop {
    .popover-wrapper {
        .popover-content {
            right: 0.5rem !important;
            top: 2.83rem !important;
            left: unset !important;
            transform-origin: right top !important;
            --width: 8rem;
            box-shadow: 0.13rem 0.5rem 1rem 0.7rem rgba(0, 0, 0, 0.15) !important;
        }
        .popover-arrow {
            right: 1.75rem !important;
            top: 2.33rem !important;
            left: unset !important;
            display: block !important;
            z-index: 1002 !important;
        }
    }
}

/* Works - pass "leftAndTop" in cssClass to increase specificity */
html:not([data-scale]) .leftAndTop {
    .popover-wrapper {
        .popover-content {
            top: 2.83rem !important;
            left: 2.33rem !important;
            transform-origin: right top !important;
            --width: 4.63rem;
            --height:6.26rem;
            box-shadow: 0.13rem 0.5rem 1rem 0.7rem rgba(0, 0, 0, 0.15) !important;
        }
        .popover-arrow {
            top: 2.33rem !important;
            left: 3.93rem !important;
            display: block !important;
            z-index: 1002 !important;
        }
    }
}



// alert message 1.7.0 赚钱宝指纹登录
html:not([data-scale]) .customAlert {
    .alert-wrapper {
        .alert-message.sc-ion-alert-ios {
            color: $LJAlertTitleColor;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
    }
}

.fingerPrintIcon {
    width: 3rem;
    height: 3rem;
}

// 蜂喔商户1.6.29 新增
html:not([data-scale]) .am-accordion::before {
    background-color: unset;
}
.grayscale {
    filter: grayscale(100%);
}


html:not([data-scale]) .am-list-item:not(:last-child) .am-list-line::after{
    height: 0 !important
}


.badge2 {
    height: 1.51rem;
    width: 1.51rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    --background: #ff3d28;
    right: calc(50% + 0.125rem);
    top: -0.5rem;
    border-radius: 0.8rem;
    border: 0.13rem solid white;
    min-width: 1.45rem;
    font-size: 0.75rem;
    font-weight: normal;
  }

  .badge3{
    left: calc(50% + 0.125rem);
    top: 0.1rem;
    border-radius: 0.8rem;
    border: 0.13rem solid white;
    min-width: 1.45rem;
    font-size: 0.75rem;
    font-weight: normal;
    height: 1.51rem;
    width: 1.51rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    --background: #ff3d28;
  }

  .border-none{
    border: none !important;
  }